import {FC} from "react";
import {ContainerInterface} from "../../../../types/interface/form.control.interface";
import '../style/index.scss'

const Container: FC<ContainerInterface> = (
    {
        id,
        name = "容器",
        title = "默认标题",
        x = 0,
        y = 0,
        z = 0,
        width = 200,
        height = 200,
        backgroundColor = "#F0F0F0"
    }) => {
    return (
        <div
            key={id}
            data-name={name}
            class='control-base-style'
            style={{
                left: `${x}px`,
                top: `${y}px`,
                zIndex: z,
                border: "1px dashed #ccc",
                padding: "10px",
                margin: "5px",
                width: `${width}px`,
                height: `${height}px`,
                backgroundColor: backgroundColor,
            }}
        >
            {title}
        </div>
    );
};

export default Container;
